<template>
	<view class="pay">
		<view class="pay-info">
			<view class="pay-item">
				<view style="color: #999999;">订单类型</view>
				<view style="color: #333333;">兑换订单</view>
			</view>
			<view class="pay-item">
				<view style="color: #999999;">订单编号</view>
				<view style="color: #333333;">320902380193321</view>
			</view>
			<view class="pay-item">
				<view style="color: #999999;">应付积分</view>
				<view style="color: #FF5F49;">429积分</view>
			</view>
		</view>
		<view class="wei">
			<view class="wei-left">
				<image src="/static/images/jifen_pay.png"></image>
				<text style="padding-left: 10px;font-weight: bold;color: #333333;font-size: 16px;">积分支付
				 <text style="color: #999999;font-weight: normal;font-size: 12px;padding-left: 4px;">可用：239</text>
				</text>
				
			</view>
			<image src="/static/images/left.png" style="width: 10px;height: 14px;"></image>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.pay{
		width: 100%;
	}
.pay-info{
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border-radius: 5px;
	margin: 10px 17px;
	font-size: 14px;
}
.pay-item{
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	padding: 14px 10px;
	border-bottom: 1px solid #F5F5F5;
}
.pay-item:last-child { 
		border-bottom:none !important;
	}
	.wei-left image{
		width: 28px;
		height: 28px;
	}
	.wei{
		background:rgba(255,255,255,1);
		border-radius:5px;
		margin: 0 17px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10px 13px;
	}
	.wei-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>
